<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>

    <div>
      <label for="inputData">Enter a new item:</label>
      <input type="text" name="item" id="inputData">
      <button id="addButton">Add item</button>
    </div>

    <ul id="elementContainer">
      <!-- <li>
        <span>输入框的值</span>
        <button>删除</button>
      </li> -->
    </ul>

    <script>
      // TODO 补充js代码 先获取DOM对象 事件绑定 事件逻辑编写
      // 在页面加载后执行
      document.addEventListener('DOMContentLoaded', function () {
        // 获取按钮和输入框元素
        const addButton = document.getElementById('addButton');
        const inputData = document.getElementById('inputData');
        const elementContainer = document.getElementById('elementContainer');

        // 监听按钮的点击事件
        addButton.addEventListener('click', function () {
          // 获取输入框中的数据
          const value = inputData.value.trim(); // 去除前后空格

          // 确保输入框中有数据才进行处理
          if (value !== '') {
            // 创建一个新的元素，比如这里我们创建一个li元素
            const newElement = document.createElement('li');
            newElement.classList.add('element');

            // 创建包含数据的新元素，并添加到新元素中
            const dataElement = document.createElement('span');
            dataElement.textContent = value;
            newElement.appendChild(dataElement);

            // 创建修改按钮并添加到新元素中
            const editButton = document.createElement('button');
            editButton.textContent = '修改';
            editButton.addEventListener('click', function () {
              // 弹出提示框，输入修改后的内容
              const newValue = prompt('请输入修改后的内容:', value);

              // 如果输入的内容不为空，更新元素内容
              if (newValue !== null && newValue.trim() !== '') {
                dataElement.textContent = newValue.trim();
              }
            });
            newElement.appendChild(editButton);

            // 创建删除按钮并添加到新元素中
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.addEventListener('click', function () {
              // 在点击删除按钮时，从父元素中移除当前元素
              newElement.remove();
            });
            newElement.appendChild(deleteButton);

            // 将新元素添加到容器中
            elementContainer.appendChild(newElement);

            // 清空输入框，方便输入下一个元素内容
            inputData.value = '';
          }
        });
      });


    </script>
  </body>
</html>
